<template>
  <div class="login-panel">
    <h1>VUE3-TS-VITE</h1>
    <el-tabs stretch type="border-card" class="demo-tabs" v-model="currentTab">
      <el-tab-pane name="account">
        <template #label>
          <span class="custom-tabs-label">
            <!-- <el-icon class="el-icon"><UserFilled /></el-icon> -->
            <component class="el-icon" :is="UserFilled"></component>
            <span>账号登录</span>
          </span>
        </template>
        <LoginAcconut ref="accountRef" />
      </el-tab-pane>
      <el-tab-pane name="phone">
        <template #label>
          <span class="custom-tabs-label">
            <component class="el-icon" :is="Iphone"></component>
            <span>手机登录</span>
          </span>
        </template>
        <LoginPhone ref="PhoneRef" />
      </el-tab-pane>
    </el-tabs>

    <div class="account-control">
      <el-checkbox v-model="isKeepPassword">记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>

    <el-button type="primary" class="dl-btn" @click="handLeLoginClick">
      立即登录
    </el-button>
  </div>
</template>

<script lang="ts">
import { UserFilled, Iphone } from '@element-plus/icons-vue'
import { defineComponent, ref } from 'vue'
import LoginAcconut from './login-account.vue'
import LoginPhone from './login-phone.vue'

import { useRouter } from 'vue-router'

export default defineComponent({
  components: {
    LoginAcconut,
    LoginPhone
  },
  setup() {
    // 1.定义属性
    const isKeepPassword = ref(true)
    const accountRef = ref<InstanceType<typeof LoginAcconut>>()
    const PhoneRef = ref<InstanceType<typeof LoginPhone>>()
    const currentTab = ref<string>('account')
    const router = useRouter()

    // 2.定义方法
    const handLeLoginClick = () => {
      router.push('/home')
      if (currentTab.value === 'account') {
        accountRef.value?.LoginAcction(isKeepPassword.value)
      } else {
        PhoneRef.value?.phoneAcction()
      }
    }

    return {
      isKeepPassword,
      handLeLoginClick,
      accountRef,
      PhoneRef,
      currentTab,
      UserFilled,
      Iphone
    }
  }
})
</script>

<style scoped lang="scss">
:deep(.is-active) {
  background-color: transparent !important;
}
:deep(.el-tabs__header) {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}
.demo-tabs {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.login-panel h1 {
  font-size: 1.5rem;
  text-align: center;
  background-image: linear-gradient(
    to right,
    skyblue,
    blue
  ); //最后三行为文字渐变CSS
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-panel {
  width: 320px;
  border-radius: 10px;
  padding: 0 50px 20px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
  .account-control {
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(
      to right,
      skyblue,
      blue
    ); //最后三行为文字渐变CSS
    -webkit-background-clip: text;
  }
  .dl-btn {
    width: 100%;
    margin-top: 10px;
    background-color: transparent !important;
    color: #2a2930;
    // background-image: linear-gradient(
    //   to right,
    //   skyblue,
    //   blue
    // ); //最后三行为文字渐变CSS
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    border: 0;
    background-color: rgb(233, 231, 231);
    backdrop-filter: blur(80px);
    border-radius: 8px;
  }
}
</style>
